class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            id: 0,
            keyword: '',
            start: 1,
            pagesize: 15,
            counts: [],
            range: '',
            listitem: [],
            createDate: '',
            cid: 0,
            name:'',
        };
    }

    formatlist(list) {
        var listitem = [], wulist = []
        if (list.length > 0) {
            list.forEach((x, i) => {
                listitem.push(
                    <tr key={i}>
                        <td>{x.name}</td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div>
                                    <img src="./src/edit.png" />
                                    <p data-toggle="modal" data-target="#modalOne" className='edit' onClick={this.edit.bind(this, x.id)}>编辑</p>
                                </div>

                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
                            </div>
                        </td>
                    </tr>
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({ listitem, list, originallist: list, wulist })
    }

    // 编辑
    edit(e) {
        var { list } = this.state, item = [];
        list.forEach(x => {
            if (x.id == e) {
                this.setState({ id: e, name: x.name, })
            }
        });
        // console.log(item, 'item')
    }
    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        this.setState({ showloading: 'ON' })
        let { delid, start } = this.state
        Mechanicstypesubdel(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist()
            } else {
                this.setState({ showloading: '' })
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }

    componentDidMount() {
        this.setState({ showloading: 'ON' })
        let that = this;

        let cid = GetQueryString('id')
        if (cid != 'null' && cid) {
            that.setState({ cid }, () => {
                this.freshlist()
            })
        } else {
            window.location.href = "./mechanicstype.html"
        }
    }
    freshlist() {
        let { cid } = this.state;
        Mechanicstypegetlistbycid(cid, res => {
            this.setState({ showloading: '' })
            if (res.issuccess == 1) {
                // if(start == 1){
                //     let pagecount = Math.ceil( res.total/pagesize);
                //     this.setpager(pagecount,start);
                //     this.setState({start,total:res.total})
                // }
                this.formatlist(res.list);
            }
        })

    }
  
    submit() {
        var { name,cid } = this.state, that = this, err = '';
        if (name == "") err = "请输入名称"
        if (err.length > 0) {
            alert(err);
            return
        }
        this.setState({ showloading: 'ON' })
        var data = { name,cid }
        if (this.state.id > 0) data['id'] = this.state.id;
        Mechanicstypesubaoe(data, res => {
            if (res.issuccess == 1) {
                that.setState({ id: 0, name: '' })
                alert(`${this.state.id > 0 ? '修改' : '保存'}成功`);
                that.freshlist()
            } else {
                that.setState({ showloading: '' })
                alert(rse.msg)
            }
        })

    }

    inputchange(prop, e) {
        this.setState({ [prop]: e.target.value })
    }
    add() {
                this.setState({ id: 0, name: '' })
    }
    toback() {
        window.location.href = "./mechanicstype.html";
    }

    render() {
        let { listitem, showloading,name } = this.state;

        return (
            <div className="breadLinebox">
                <Loading hidden={showloading != 'ON'} />
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header border">
                                <p className="modal-title">{this.state.id > 0 ? "编辑" : "新建"}</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group">
                                    <span className="input-group-addon">名称</span>
                                    <input id='name' onChange={this.inputchange.bind(this, 'name')} value={name} type="text" placeholder='请输入名称' className="input" />
                                </div>
                            </div>
                            <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.submit.bind(this)} data-dismiss="modal" className="submitmod">提交</button>
                            </div>

                        </div>
                    </div>
                </div>

                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            <img src='./src/lm_order1.png' />
                            <span onClick={this.toback.bind(this)} style={{ cursor: 'pointer' }}>机械分类管理</span> {'>'} 二级分类管理

                        </div>
                    </div>
                    <div className="content">

                        <div className="tabletit" >
                            <p className="add" data-toggle="modal" data-target="#modalOne" style={{ cursor: 'pointer' }} onClick={this.add.bind(this)}>新建</p>
                        </div>
                        <table className="tab">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                        {this.state.wulist}
                        {/* <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={this.state.counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={this.state.pagestart} />
                        </div> */}
                    </div>
                </div>
            </div>


        )


    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='mechanicstype' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)